<template>
  <div class="home">
    <el-row :gutter="20">
      <el-col :span="16">
        <div class="grid-content">
          <HomeIsHit
            @changeColor="changeColor"
            @moveColor="moveColor"
          ></HomeIsHit>
        </div>
        <div class="grid-content">
          <HomeUpComing></HomeUpComing>
        </div>
        <div class="grid-content">
          <HomeHotFilm></HomeHotFilm>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content">
          <HomeOffice></HomeOffice>
        </div>
        <div class="grid-content">
          <HomeAd></HomeAd>
        </div>
        <div class="grid-content">
          <HomeHope></HomeHope>
        </div>
        <div class="grid-content">
          <HomeTop100></HomeTop100>
        </div>
        <div class="grid-content">
          <HomeFilmmaker></HomeFilmmaker>
        </div>
        <div class="grid-content">
          <HomeEntertainment></HomeEntertainment>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import HomeIsHit from './HomeIsHit'
import HomeUpComing from './HomeUpComing'
import HomeHotFilm from './HomeHotFilm'
import HomeOffice from './HomeOffice'
import HomeAd from './HomeAd'
import HomeHope from './HomeHope'
import HomeTop100 from './HomeTop100'
import HomeFilmmaker from './HomeFilmmaker'
import HomeEntertainment from './HomeEntertainment'
export default {
  data: () => ({ 
    arr: [],
    moveIndex: ''
  }),
  created() {
  },
  methods: {
    changeColor({index, elem, bgColor, ftColor}) {
      this.arr = Array.from(elem)
      this.arr[index].$el.style.backgroundColor = bgColor
      if(ftColor) this.arr[index].$el.style.color = ftColor
      this.moveIndex = index
    },
    moveColor({bgColor, ftColor}){
      if(bgColor) this.arr[this.moveIndex].$el.style.backgroundColor = bgColor
      if(ftColor) this.arr[this.moveIndex].$el.style.color = ftColor
    }
  },
  components: {
    HomeIsHit,
    HomeUpComing,
    HomeHotFilm,
    HomeOffice,
    HomeAd,
    HomeHope,
    HomeTop100,
    HomeFilmmaker,
    HomeEntertainment
  }
}
</script>
<style lang="less">
* {
  margin: 0;
  padding: 0;
}
.home {
  width: 1200px;
  margin: 160px auto;
  .grid-content {
    margin-bottom: 60px;
    &:last-child {
      margin-bottom: 0;
    }
    .class-title {
      padding-left: 15px;
      font-weight: normal;
      position: relative;
      margin-bottom: 20px;
      .go {
        display: block;
        position: absolute;
        right: 22px;
        top: 10px;
        font-size: 14px;
      }
    }
    .el-col {
      margin: 0 16px 20px;
      .image {
        width: 100%;
        height: 100%;
      }
      .el-card {
        position: relative;
        .title {
          width: 100%;
          position: absolute;
          padding-left: 10px;
          z-index: 100;
          color: #fff;
          font-size: 14px;
        }
        .score {
          position: absolute;
          z-index: 100;
          color: #ffb400;
          font-size: 14px;
        }
        .num {
          font-size: 14px;
          color: #ffb400;
          background-color: #fbfbfb;
        }
      }
    }
  }
}
</style>